<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<title>音乐播放器 - 登录/注册</title>

	<!-- 导入外部资源 -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<script src="js/jquery-3.1.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>

	<style>
		/* 基础样式 */
		body {
			margin: 0;
			padding: 0;
			background-image: url("images/3.png");
			background-size: cover;
			background-attachment: fixed;
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		}

		/* 容器样式 */
		.auth-container {
			width: 420px;
			background-color: rgba(255, 255, 255, 0.95);
			padding: 35px;
			border-radius: 12px;
			box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
			transition: all 0.3s ease;
			position: relative;
		}

		.auth-container:hover {
			box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
		}

		/* 标题样式 */
		.auth-title {
			text-align: center;
			margin-bottom: 30px;
			color: #333;
			font-weight: 600;
			font-size: 24px;
		}

		/* 标签切换样式 */
		.tab-switch {
			display: flex;
			margin-bottom: 25px;
			border-bottom: 1px solid #e0e0e0;
		}

		.tab-btn {
			flex: 1;
			padding: 10px 0;
			background: none;
			border: none;
			font-size: 16px;
			font-weight: 500;
			color: #666;
			cursor: pointer;
			position: relative;
			transition: color 0.3s ease;
		}

		.tab-btn.active {
			color: #2c3e50;
			font-weight: 600;
		}

		.tab-btn.active::after {
			content: '';
			position: absolute;
			bottom: -1px;
			left: 0;
			width: 100%;
			height: 3px;
			background-color: #3498db;
		}

		.tab-btn:hover:not(.active) {
			color: #3498db;
		}

		/* 表单样式 */
		.tab-content {
			display: none;
		}

		.tab-content.active {
			display: block;
			animation: fadeIn 0.5s ease;
		}

		@keyframes fadeIn {
			from { opacity: 0; transform: translateY(10px); }
			to { opacity: 1; transform: translateY(0); }
		}

		.form-group {
			margin-bottom: 22px;
		}

		.form-label {
			display: block;
			margin-bottom: 8px;
			color: #555;
			font-weight: 500;
		}

		.form-control {
			width: 100%;
			padding: 12px 15px;
			border: 1px solid #ddd;
			border-radius: 6px;
			font-size: 15px;
			transition: border-color 0.3s ease, box-shadow 0.3s ease;
			box-sizing: border-box;
		}

		.form-control:focus {
			border-color: #3498db;
			box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
			outline: none;
		}

		/* 按钮样式 */
		.btn-submit {
			width: 100%;
			padding: 12px;
			border: none;
			border-radius: 6px;
			font-size: 16px;
			font-weight: 500;
			cursor: pointer;
			transition: all 0.3s ease;
			margin-top: 10px;
		}

		.btn-login {
			background-color: #3498db;
			color: white;
		}

		.btn-login:hover {
			background-color: #2980b9;
		}

		.btn-register {
			background-color: #2ecc71;
			color: white;
		}

		.btn-register:hover {
			background-color: #27ae60;
		}

		/* 悬浮提示消息样式 */
		.toast-message {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 15px 25px;
			border-radius: 8px;
			color: white;
			font-size: 16px;
			font-weight: 500;
			z-index: 1000;
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.3s ease, transform 0.3s ease;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		}

		.toast-message.show {
			opacity: 1;
			transform: translate(-50%, -50%) scale(1);
		}

		.toast-success {
			background-color: rgba(46, 204, 113, 0.9);
		}

		.toast-error {
			background-color: rgba(231, 76, 60, 0.9);
		}

		/* 旧的消息提示框（用于表单验证） */
		.alert {
			display: none;
			padding: 12px 15px;
			margin-bottom: 20px;
			border-radius: 6px;
			font-size: 14px;
			animation: slideIn 0.3s ease;
		}

		@keyframes slideIn {
			from { transform: translateY(-10px); opacity: 0; }
			to { transform: translateY(0); opacity: 1; }
		}

		.alert-warning {
			background-color: #fff3cd;
			color: #856404;
			border: 1px solid #ffeeba;
		}

		.close {
			background: none;
			border: none;
			font-size: 18px;
			cursor: pointer;
			color: inherit;
			float: right;
			margin-top: -3px;
		}
	</style>

	<script>
		// 核心业务逻辑
		$(function(){
			// 创建悬浮提示元素
			$("body").append('<div class="toast-message"></div>');

			// 切换表单显示
			$("#login-tab").click(function(){
				$(this).addClass("active");
				$("#register-tab").removeClass("active");
				$("#login-form").addClass("active");
				$("#register-form").removeClass("active");
				$(".alert").hide();
			});

			$("#register-tab").click(function(){
				$(this).addClass("active");
				$("#login-tab").removeClass("active");
				$("#register-form").addClass("active");
				$("#login-form").removeClass("active");
				$(".alert").hide();
			});

			// 登录功能
			$("#login-submit").click(function(){
				var username = $("#login-user").val();
				var password = $("#login-password").val();

				if(username.trim() == "" || password.trim() == "") {
					showFormMessage("用户名或者密码不能为空！");
					return;
				}

				$.ajax({
					url:"/user/login",
					data:{"username":username,"password":password},
					type:"POST",
					dataType:"json",
					success:function(data) {
						console.log("登录响应:", data);
						if(data.status == 0) {
							showToast("登录成功！即将跳转...", "success");
							setTimeout(function(){
								window.location.href="list.html";
							}, 1000);
						}else{
							showFormMessage("登录失败：" + data.message);
							$("#login-password").val("");
						}
					},
					error:function(xhr, status, error) {
						console.error("登录请求错误:", error);
						showFormMessage("登录请求失败，请稍后重试");
					}
				});
			});

			// 注册功能
			$("#register-submit").click(function(){
				var username = $("#register-user").val();
				var password = $("#register-password").val();
				var confirmPassword = $("#register-confirm-password").val();

				// 表单验证
				if(username.trim() == "") {
					showFormMessage("用户名不能为空！");
					return;
				}

				if(password.trim() == "") {
					showFormMessage("密码不能为空！");
					return;
				}

				if(password.length < 6) {
					showFormMessage("密码长度不能少于6位！");
					return;
				}

				if(password !== confirmPassword) {
					showFormMessage("两次输入的密码不一致！");
					return;
				}

				$.ajax({
					url:"/user/register",
					data:{"username":username,"password":password},
					type:"POST",
					dataType:"json",
					success:function(data) {
						console.log("注册响应:", data);
						if(data.status == 0) {
							// 注册成功 - 显示悬浮提示
							showToast("注册成功！", "success");

							// 延迟切换到登录表单
							setTimeout(function(){
								$("#login-tab").click();
								// 填充用户名
								$("#login-user").val(username);
								// 清空注册表单
								$("#register-user").val("");
								$("#register-password").val("");
								$("#register-confirm-password").val("");
							}, 1500);
						}else{
							// 注册失败 - 显示悬浮提示
							showToast("注册失败：" + data.message, "error");
						}
					},
					error:function(xhr, status, error) {
						console.error("注册请求错误:", error);
						showToast("注册请求失败，请稍后重试", "error");
					}
				});
			});

			// 显示表单内的提示消息（用于表单验证）
			function showFormMessage(text) {
				var alertElement = $(".alert");
				alertElement.removeClass("alert-warning alert-success alert-danger");
				alertElement.addClass("alert-warning");
				alertElement.find("#message").text(text);
				alertElement.show();

				// 3秒后自动隐藏
				setTimeout(function(){
					alertElement.fadeOut(500);
				}, 3000);
			}

			// 显示悬浮提示消息（用于注册结果）
			function showToast(text, type = "success") {
				var toast = $(".toast-message");
				toast.removeClass("toast-success toast-error show");
				toast.addClass("toast-" + type);
				toast.text(text);

				// 显示提示
				setTimeout(function(){
					toast.addClass("show");
				}, 10);

				// 2秒后隐藏
				setTimeout(function(){
					toast.removeClass("show");
				}, 2000);
			}

			// 关闭表单内提示消息
			$(".close").click(function(){
				$(".alert").hide();
			});
		});
	</script>
</head>
<body>
<div class="auth-container">
	<h3 class="auth-title">音乐播放器</h3>

	<!-- 切换标签 -->
	<div class="tab-switch">
		<button id="login-tab" class="tab-btn active">登录</button>
		<button id="register-tab" class="tab-btn">注册</button>
	</div>

	<!-- 表单内提示框（用于验证） -->
	<div class="alert alert-warning">
		<button type="button" class="close">&times;</button>
		<span id="message"></span>
	</div>

	<!-- 登录表单 -->
	<div id="login-form" class="tab-content active">
		<div class="form-group">
			<label for="login-user" class="form-label">用户名</label>
			<input type="text" name="username" class="form-control" id="login-user" placeholder="请输入用户名"/>
		</div>

		<div class="form-group">
			<label for="login-password" class="form-label">密码</label>
			<input type="password" name="password" class="form-control" id="login-password" placeholder="请输入密码"/>
		</div>

		<button id="login-submit" class="btn-submit btn-login">登录</button>
	</div>

	<!-- 注册表单 -->
	<div id="register-form" class="tab-content">
		<div class="form-group">
			<label for="register-user" class="form-label">用户名</label>
			<input type="text" name="username" class="form-control" id="register-user" placeholder="请设置用户名"/>
		</div>

		<div class="form-group">
			<label for="register-password" class="form-label">密码</label>
			<input type="password" name="password" class="form-control" id="register-password" placeholder="请设置密码（至少6位）"/>
		</div>

		<div class="form-group">
			<label for="register-confirm-password" class="form-label">确认密码</label>
			<input type="password" class="form-control" id="register-confirm-password" placeholder="请再次输入密码"/>
		</div>

		<button id="register-submit" class="btn-submit btn-register">注册</button>
	</div>
</div>
</body>
</html>
